<template>
  <div class="shop-types">
    <el-container>
      <el-button type="primary" class="add-btn" @click="add()">新增</el-button>
    </el-container>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'list'}">
      <el-table-column
        prop="title"
        label="类型名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="分类"
        width="100">
         <template slot-scope="{row}">
          {{ row.type == 1 ? '店铺' : '服务'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="logo"
        label="图标"
        width="180">
        <template slot-scope="scope">
          <img :src="scope.row.logo" class="logo"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建日期">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" v-if="scope.row.parentId === 0" size="mini" @click="add(scope.row)">新增</el-button>
          <el-button type="danger" size="mini" @click="remove(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <shop-type :parent="currentParent" @close="getList" ref="shopType"/>
  </div>
</template>

<script>
import ShopType from '@/components/ShopType'

export default {
  name: 'ShopTypes',
  components: {ShopType},
  data () {
    return {
      list: [],
      loading: false,
      tableData: [],
      currentParent: null,
      isShowAddType: false,
      activeName: '1'
    }
  },
  methods: {
    handleClick (val) {
      console.log('test val', val)
      this.activeName = val
    },
    getList () {
      this.loading = true
      return this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/shopType/list`, {}).then(res => {
        if (res.data.code !== 200) {
          this.$message.error(res.data.message)
          return
        }
        this.tableData = res.data.body
      }).catch(err => console.error(err)).finally(() => {
        this.loading = false
      })
    },
    /**
     * 移除店铺分类
     * @param {*} 要移除的数据
     */
    remove (row) {
      this.$confirm('确定要删除此节点以及全部子节点？').then(() => {
        this.loading = true
        this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/shopType/delete`, {
          query: {
            id: row.id
          }
        }).then(res => {
          console.log('删除成功', res)
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }).catch(err => {
          console.error(err)
          this.$notify({
            title: '提示',
            message: '删除失败!',
            duration: 0
          })
        }).finally(() => {
          this.loading = false
        })
      })
    },
    /**
     * 添加记录
     * @param {*} 记录的父节点
     */
    add (row = null) {
      this.currentParent = row
      this.$nextTick(() => {
        this.$refs.shopType.show()
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped lang="less">
.add-btn {
  margin-bottom: 20px;
}
.logo {
  display: block;
  max-width: 100px;
  max-height: 100px;
}
</style>
